<!-- 研发创新 -->
<template>
  <div class="innovate">
    <header v-if="data.create_back"
      :style="'background: url(' + data.create_back + ') no-repeat 50% 50%;'"
    >
      <span>{{ i18n.innovate.innovate }}</span>
    </header>
    <div class="introduce">
      <h3>{{ data.create_title }}</h3>
      <p>
        {{ data.create_content }}
      </p>
    </div>
    <div class="data">
      <div>
        <p>{{data.create_num1}}</p>
        <i></i>
        <span>{{data.create_title1}}</span>
      </div>
      <div>
        <p>{{data.create_num2}}</p>
        <i></i>
        <span>{{data.create_title2}}</span>
      </div>
      <div>
        <p>{{data.create_num3}}</p>
        <i></i>
        <span>{{data.create_title3}}</span>
      </div>
    </div>
    <div class="modules">
      <div v-for="(value,ins) in data.module" :key="ins">
        <div v-for="val in value" :key="val.id">
          <main>
            <h3>{{val.title}}</h3>
            <p>{{val.content}}</p>
            <i></i>
          </main>
        </div>
      </div>
    </div>
    <p>
      {{data.create_content2}}
    </p>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import bus from "@/config/emit";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      data: {},
      modules:[]
    };
  },
  //计算属性 类似于data概念
  computed: {
    i18n() {
      return this.$t("message");
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getCreate() {
      this.$getRequest("/index/getCreate").then((res) => {
        this.data = res.data;
        let arr = []
        this.data.module.forEach((val,ins)=>{
          arr[Math.floor(ins/2)]=arr[Math.floor(ins/2)]||[]
          arr[Math.floor(ins/2)].push(val)
        })
        this.data.module=arr
      });
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getCreate();
    bus.$on("lang", () => {
      if (this.$route.name == "/innovate") {
        this.getCreate();
      }
    });
  },
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {
    this.getCreate();
  }, //如果页面有keep-alive缓存功能，激活
  deactivated() {}, //如果页面有keep-alive缓存功能，非激活
};
</script>
<style lang="less">
.innovate {
  & > p {
    color: #666666;
    font-size: 0.25rem;
    text-align: center;
    width: 17.5rem;
    margin: 0.875rem auto;
  }

  & > .modules {
    width: 100%;
    margin: 0.875rem auto;

    & > div:nth-child(1n) {
      & > div:nth-child(1) {
        background: url("../assets/innovate/2.png") no-repeat 50% 50%;
        background-size: 100% 100%;
        color: #fff;
        justify-content: flex-end;

        & > main {
          margin-right: 0.75rem;

          & > h3 {
            border-bottom: 1px solid #066ddf;
          }
        }
      }

      & > div:nth-child(2) {
        background: url("../assets/innovate/3.png") no-repeat 50% 50%;
        background-size: 100% 100%;

        & > main {
          margin-left: 0.75rem;

          & > h3 {
            border-bottom: 1px solid #434343;
          }
        }
      }
    }

    & > div:nth-child(2n) {
      & > div:nth-child(1) {
        background: url("../assets/innovate/4.png") no-repeat 50% 50%;
        background-size: 100% 100%;
        justify-content: flex-end;
        color: #333;

        & > main {
          margin-right: 0.75rem;

          & > h3 {
            border-bottom: 1px solid #434343;
          }
        }
      }

      & > div:nth-child(2) {
        background: url("../assets/innovate/5.png") no-repeat 50% 50%;
        background-size: 100% 100%;
        color: #fff;

        & > main {
          margin-left: 0.75rem;

          & > h3 {
            border-bottom: 1px solid #066ddf;
          }
        }
      }
    }

    & > div {
      width: 100%;
      display: flex;

      & > div {
        width: 50%;
        min-height: 5.625rem;
        display: flex;
        align-items: center;
        padding: 0.3rem 0;
        box-sizing: border-box;

        & > main {
          width: 8rem;
          display: flex;
          flex-direction: column;

          & > i {
            width: 0.5625rem;
            height: 0.125rem;
            border-radius: 0.125rem;
            background-color: #fa622f;
          }

          & > p {
            font-size: 0.25rem;
            margin: 0.2125rem 0;
          }

          & > h3 {
            width: 100%;
            font-size: 0.3125rem;
            padding-bottom: 0.1875rem;
          }
        }
      }
    }
  }

  & > .data {
    width: 17.5rem;
    margin: 0.875rem auto;
    display: flex;

    & > div {
      flex: 1;
      height: 1.75rem;
      display: flex;
      align-items: center;
      justify-content: center;

      & > span {
        font-size: 0.3125rem;
        transform: translate(0.1rem, 0.5rem);
      }

      & > i {
        width: 1px;
        height: 0.875rem;
        background-color: #333;
        transform: translateY(0.375rem) rotateZ(45deg);
      }

      & > p {
        font-size: 0.75rem;
        color: #223ad6;
        font-weight: bold;
      }
    }
  }

  & > .introduce {
    width: 17.5rem;
    margin: 0.875rem auto;
    text-align: center;

    & > p {
      font-size: 0.25rem;
    }

    & > h3 {
      font-size: 0.375rem;
      margin-bottom: 0.375rem;
    }
  }

  & > header {
    width: 100%;
    height: 7.5rem;
    background-size: auto 100% !important;
    color: #fff;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
}

@media screen and (max-width: 768px) {
  .innovate {
    & > p {
      font-size: 1rem;
      width: 33.5rem;
      margin: 1rem auto;
    }

    & > .modules {
      margin: 1rem auto;

      & > div:nth-child(1n) {
        & > div:nth-child(1) {
          background-size: auto 100%;
        }

        & > div:nth-child(2) {
          background-size: auto 100%;
        }
      }

      & > div:nth-child(2n) {
        & > div:nth-child(1) {
          background: url("../assets/innovate/5.png") no-repeat 50% 50%;
          background-size: auto 100%;
          color: #fff;

          & > main {
            & > h3 {
              border-bottom: 1px solid #066ddf;
            }
          }
        }

        & > div:nth-child(2) {
          background: url("../assets/innovate/4.png") no-repeat 50% 50%;
          background-size: auto 100%;
          color: #333;

          & > main {
            & > h3 {
              border-bottom: 1px solid #434343;
            }
          }
        }
      }

      & > div {
        flex-wrap: wrap;

        & > div {
          width: 100%;
          min-height: 18rem;
          padding: 1rem 0;

          & > main {
            width: 33.5rem;
            margin: 0 auto !important;

            & > i {
              width: 2rem;
              height: 0.5rem;
              border-radius: 0.25rem;
              background-color: #fa622f;
            }

            & > p {
              font-size: 1rem;
              margin: 1rem 0;
            }

            & > h3 {
              font-size: 1.2rem;
              padding-bottom: 1rem;
              border-bottom: 1px solid #066ddf;
            }
          }
        }
      }
    }

    & > .data {
      width: 33.5rem;
      margin: 1rem auto;

      & > div {
        height: 3rem;

        & > span {
          font-size: 1rem;
          transform: translate(0.3rem, 0.7rem);
        }

        & > i {
          height: 1.7rem;
          transform: translateY(0.6rem) rotateZ(30deg);
        }

        & > p {
          font-size: 1.3rem;
        }
      }
    }

    & > .introduce {
      width: 33.5rem;
      margin: 2rem auto;

      & > p {
        font-size: 1rem;
      }

      & > h3 {
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
      }
    }

    & > header {
      height: 20rem;
      background-size: auto 100% !important;
      font-size: 1.5rem;
    }
  }
}
</style>